// 动态加载组件
import { lazy, Suspense } from "react";
// 动态加载组件 方法
function LazyLoad(url: any) {
  // 配置动态加载组件路径
  const Element = lazy(() => {
    // 返回组件路径
    return new Promise(resolve => {
      // 加载url对应的组件
      import(/*@vite-ignore*/ "../views/" + url)
        // 加载成功后返回组件
        .then(res => {
          // 返回组件
          resolve(res);
        })
        .catch(err => {
          // 加载失败后返回错误信息
          console.log(err, "加载失败");
          resolve(import("../views/" + "Error"));
        });
    });
  });
  // 返回组件
  return (
    // 返回组件，Suspense:懒加载组件
    <Suspense fallback={<h3>加载中. . . </h3>}>
      {/* 内容组件 */}
      {/* 加载成功后返回Element组件 */}
      <Element />
    </Suspense>
  );
}
// 导出方法
export default LazyLoad;
